<template>
  <div class="index">
    <el-container>
      <el-header style="padding: 0;">
        <el-menu mode="horizontal" :ellipsis="false" @select="">
          <el-menu-item index="0">
            <h3>柏瑞OA办公系统</h3>
          </el-menu-item>
          <el-menu-item index="1">
            <el-avatar
              src="https://tse1-mm.cn.bing.net/th/id/OIP-C.GZBa_hixAIn5uPFkv0J4NwAAAA?w=214&h=213&c=7&r=0&o=5&dpr=1.6&pid=1.7" />
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px" style="height: calc(100vh - 60px);background-color: #fff;">
          <el-menu :default-active="activeIndex" mode="vertical" :ellipsis="false" @select="handleSelect"
            :router="true">
            <el-menu-item index="/article/manage">
              <el-icon>
                <House />
              </el-icon>首页
            </el-menu-item>
            <el-menu-item index="/article/channel">
              <el-icon>
                <Document />
              </el-icon>我的申请
            </el-menu-item>
            <el-menu-item index="/index/Console">
              <el-icon>
                <Document />
              </el-icon>增删改查
            </el-menu-item>
            <el-menu-item index="/test/page">
              <el-icon>
                <Document />
              </el-icon>测试页面
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="body-main">
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
</script>
<style scoped lang="scss">
.index {
  width: 100%;

  // .demo{
  //   margin-top: 0.5%;
  // }
  .el-menu--horizontal>.el-menu-item:nth-child(1) {
    margin-right: auto;
  }

  .body-main {
    height: calc(100vh - 60px);
    padding: 15px;
    background-color: #f7f8fa;
    overflow: scroll;
  }
}
</style>
